<template>
  <el-button type="primary" @click="adminAdd">
    添加管理员 +
  </el-button>
  <!-- v-loading 加载 -->
  <el-table :data="tableData" style="width: 100%" v-loading="loading">
    <el-table-column type="index" width="150" label="序号" />
    <el-table-column label="账号" prop="adminname" />
    <el-table-column label="权限">
      <template #default="scope">
        <span class="admin">{{ scope.row.role }}</span>
      </template>
    </el-table-column>

    <el-table-column align="right">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
    open
  </el-button> -->

  <!-- 编辑 新增 -->
  <el-drawer v-model="dialogFormVisible" :title="isEdit ? '新增' : '编辑'" :with-header="false" >
    <el-form :model="form">
      <el-form-item label="账号" label-width="100px" :rules="[
        { required: true, message: '请输入账号' },
        { type: 'number', message: '账号不对' },
      ]">
        <el-input v-model="form.adminname" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" label-width="100px" :rules="[
        { required: true, message: '请输入密码' },
        { message: '密码不对' },
      ]">
        <el-input v-model="form.password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="角色" label-width="100px" :rules="[
        { required: true, message: '请选择角色' },
        { message: '角色未选择' },
      ]">
        <el-select class="el-input__inner" v-model="form.role" placeholder="">
          <el-option label="管理员" value="管理员" />
          <el-option label="超级管理员" value="超级管理员" />
        </el-select>
      </el-form-item>
      <el-form-item label="权限"  label-width="100px" :rules="[
        { required: true },
      ]">
          <el-tree :data="data"  :props="defaultProps" show-checkbox @check-change="handlerChange"
             :node-key="data.path" :default-checked-keys ="checkedKeys"  />
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="editSave" v-html="isEdit ? '新增管理员' : '修改管理员'">

        </el-button>
      </span>
    </template>
  </el-drawer>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'

import { useRouter } from 'vue-router'

const isEdit = ref(true)
const loading = ref(true)
const search = ref('')
const dialogFormVisible = ref(false)
const form = reactive({
  adminname: '',
  password: '',
  role: '',
})
const checkedKeys = ref([])
const router = useRouter()

const data = [
  {
    label: '首页',
    path: 1
  },
  {
    label: '轮播图管理',
    path: 2,
    children: [
      {
        label: '轮播图列表',
        path: 3
      },
    ],
  },
  {
    label: '账号管理',
    path: 4,
    children: [
      {
        label: '管理员列表',
        path: 5
      },
    ],
  },
  {
    label: '产品管理',
    path: 6,
    children: [
      {
        label: '产品列表',
        path: 7
      },
      {
        label: '秒杀列表',
        path: 8
      },
      {
        label: '推荐列表',
        path: 9
      },
      {
        label: '筛选列表',
        path: 10
      },
    ],
  },
  {
    label: '数据可视化',
    path: 11,
    children: [
      {
        label: 'echarts使用',
        path: 12
      },
    ],
  },
  {
    label: '编辑器',
    path: 13,
    children: [
      {
        label: '富文本编辑器',
        path: 14
      },
    ],
  },
  {
    label: 'excel管理',
    path: 15,
    children: [
      {
        label: 'excel导入',
        path: 16
      },
      {
        label: 'excel导出',
        path: 17
      },
    ],
  },
  {
    label: '地图管理',
    path: 18,
    children: [
      {
        label: '百度地图',
        path: 19

      }
    ]
  },
]

const defaultProps = {
  children: 'children',
  label: 'label',
}
const tableData = ref([])
onMounted(async () => {
  let res = await getAdminList('/admin/list')
  if (res.code == '200') {
    res.data.map((item, index) => {
      if (item.role === 1) {
        res.data[index].role = "管理员"
      } else {
        res.data[index].role = "超级管理员"
      }
    })
    tableData.value = res.data
    loading.value = false
  }
})

// 新增
const newArr = ref([1])
const handlerChange = (data, flag) => {
  console.log(data, flag)
  if (flag) {

    newArr.value.map((item,index )=> {
      if (data.path === item || item === undefined) {
        newArr.value.splice(index,1)
      } 
    })
    newArr.value.push(data.path)
    checkedKeys.value = newArr.value
  }
}
import { addAdmin, editAdmin, getAdminList } from "@/api/adminList.js"
const adminAdd = () => {
  form.adminname = ''
  form.password = ''
  form.role = ''
  checkedKeys.value = []
  dialogFormVisible.value = true
  isEdit.value = true
}



const filterArr = (data, row) => {
  console.log(data);
}
// 修改

const handleEdit = async (index, row) => {
  // 显示编辑内容
  form.adminname = row.adminname
  form.password = row.password
  form.role = row.role
  checkedKeys.value = row.checkedKeys
  dialogFormVisible.value = true
  isEdit.value = false
  console.log(checkedKeys.value);
}

// 保存编辑内容
const editSave = async () => {
  // 什么时候关闭，一定是数据传输成功的时候
  dialogFormVisible.value = false
  if (form.role === "管理员") {
    form.role = 1
  } else if (form.role === "超级管理员") {
    form.role = 2
  }
  if (!isEdit.value) {
    // 修改接口
    let res = await editAdmin("/admin/update", {
      adminname: form.adminname,
      password: form.password,
      role: form.role,
      checkedKeys: checkedKeys.value,
    })

    if (res.code == '200') {
      // 重新请求当前数据接口
      let res = await getAdminList('/admin/list')
      if (res.code == '200') {
        res.data.map((item, index) => {
          if (item.role === 1) {
            res.data[index].role = "管理员"
          } else {
            res.data[index].role = "超级管理员"
          }
        })
        tableData.value = res.data
        // 路由不靠谱
        // router.push({ path: '/home/bannerList' })
      }
    }
  } else {
    // 添加接口
    let res = await addAdmin('/admin/add', {
      adminname: form.adminname,
      password: form.password,
      role: form.role,
      checkedKeys: checkedKeys.value,
    })

    if (res.code == '200') {
      // 重新请求当前数据接口
      let res = await getAdminList('/admin/list')
      if (res.code == '200') {
        res.data.map((item, index) => {
          if (item.role === 1) {
            res.data[index].role = "管理员"
          } else {
            res.data[index].role = "超级管理员"
          }
        })
        tableData.value = res.data
        // 路由不靠谱
        // router.push({ path: '/home/bannerList' })
      }
    }
  }
}
import { ElMessage, ElMessageBox } from 'element-plus'
import { delAdmin } from "@/api/adminList.js"
// 删除
function handleDelete(index, row) {
  ElMessageBox.alert('您是否要删除？', '提示', {
    // if you want to disable its autofocus
    // autofocus: false, 
    confirmButtonText: '确定',
    callback: async (action) => {
      if (action === 'confirm') {
        // 删除接口
        let res = await delAdmin('/admin/delete', { adminid: row.adminid })
        // 是否删除成功
        if (res.code == '200') {
          tableData.value.splice(index, 1)
          ElMessage({
            type: 'success',
            message: `删除成功`,
          })
        }
      }
    },
  })
}

</script>
<style scoped>
.admin {
  display: inline-block;
  background: #87D068;
  color: #fff;
  padding: 4px;
  border-radius: 8px;
}
</style>